<template>
	<view class="login-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="false" color="#fff" title="潍城人大"></uni-navbar></view>
		<view class="logo-box">
			<view class="logo-ttl">
				<view class="h1" :style="{ 'margin-top': statusBarHeight }">潍城人大</view>
				<image class="h1-img" src="/static/img/logo.png" mode="widthFix"></image>
				<image class="bg-img" src="/static/img/bg_02.png" mode="widthFix"></image>
			</view>
		</view>

		<u-modal v-model="show" :content="content" :zoom="false" :mask-close-able="true" :show-cancel-button="true">
			<button slot="confirm-button" class="btn hairline-left" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">确定</button>
		</u-modal>

		<view class="btn-box">
			<button class="btn-item item01" @click="getUserProfile">
				<image class="img" src="/static/img/img01.png" mode="scaleToFill"></image>
				<text class="span">选民群众登录</text>
			</button>
			<button class="btn-item item02" @click="nameLogin">
				<image class="img" src="/static/img/img01.png" mode="scaleToFill"></image>
				<text class="span">人大代表登录</text>
			</button>
			<button class="btn-item item03" @click="nameLogin">
				<image class="img" src="/static/img/img01.png" mode="scaleToFill"></image>
				<text class="span">工作人员登录</text>
			</button>
		</view>
	</view>
</template>

<script>
// let WXBizDataCrypt = require('@/utils/WXBizDataCrypt.js');
import { mapState } from 'vuex';
export default {
	data() {
		return {
			statusBarHeight: '0',
			show: false,
			jsCode: '',
			content: '请绑定手机号',
			infoRes: {
				avatarUrl: '',
				gender: 0,
				nickName: '微信用户'
			}
		};
	},
	onLoad(option) {
		this.$store.commit('logout');
		this.$logout();
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'rpx';
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		nameLogin() {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		},
		getUserProfile(e) {
			// 推荐使用uni.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
			uni.login({
				provider: 'weixin',
				success: (res) => {
					if (res.code) {
						this.jsCode = res.code;
						this.show = true;
					} else {
						console.log('登录失败！' + res.errMsg);
					}
				}
			});
		},
		onGetUserInfo(e) {
			console.log(e.detail);
			if (e.detail.errMsg == 'gtUserInfo:fail user deny') {
				//拒绝授权后弹出一些提示
				this.$msg('请同意获取信息用于公众用户登录');
				console.log(e.detail);
			} else {
				// this.encryptedData = e.detail.encryptedData; //加密的用户信息
				// this.iv = e.detail.iv; //加密算法的初始向量
				let pc = new WXBizDataCrypt('wx5581668a2fa8619d', this.session_key);
				let data = pc.decryptData(e.detail.encryptedData, e.detail.iv);
				console.log(data);
			}
		},
		onGetPhoneNumber(e) {
			if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
				//拒绝授权后弹出一些提示
				this.$msg('请同意获取手机号用于公众用户登录');
				console.log(e.detail);
			} else {
				this.encryptedData = e.detail.encryptedData; //加密的用户信息
				this.iv = e.detail.iv; //加密算法的初始向量
				// let pc = new WXBizDataCrypt('wxa3cad2b5781a0e48', this.session_key);
				// let data = pc.decryptData(e.detail.encryptedData, e.detail.iv);
				let data = {
					encryptedData: this.encryptedData,
					iv: this.iv,
					userInfo: this.infoRes,
					code: this.jsCode
				};
				this.submit(data);
			}
		},
		submit(form) {
			this.$request('/wechat/login', form, {
				load: true
			}).then(res => {
				if (!res.data.userId) {
					this.$msg('登录失败');
					return false;
				}
				let userInfo = res.data;
				userInfo.userInfo = this.infoRes;
				userInfo.roleCodes = ['qunzhong'];
				userInfo.roleNames = ['人民群众'];

				userInfo.sysUser.clientCode = userInfo.sysUser.clientCode || '370702';

				this.$store.commit('login', userInfo);
				uni.navigateBack();
			});
		}
	}
};
</script>

<style lang="scss">
.login-view {
	min-height: 100vh;
	overflow: hidden;
	background: #fff no-repeat top center;
}

.logo-box {
	margin-bottom: 140rpx;
	// text-align: center;

	.logo-ttl {
		position: relative;
		padding: 50rpx 30rpx 20rpx;
		height: 470rpx;
	}

	.h1 {
		position: relative;
		font-size: 18px;
		font-weight: 600;
		color: #fff;
		line-height: 64rpx;
		z-index: 1;
	}

	.h1-img {
		position: relative;
		margin: 200rpx auto 40rpx;
		width: 180rpx;
		z-index: 1;
	}

	.bg-img {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 432rpx;
	}
}

.btn {
	font-size: 32rpx;
	line-height: 100rpx;
	border-radius: 4rpx;
	background: none;

	&::after {
		display: none;
	}
}

.btn-box {
	// position: fixed;
	// left: 0;
	// right: 0;
	// bottom: 30rpx;
	margin: 0 60rpx;

	.btn-item {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		padding: 0;
		height: 128rpx;
		font-size: 20px;
		color: #fff;
		line-height: 128rpx;
		text-align: center;
		text-indent: -1em;
		border-radius: 12rpx;
		border: 0;
		// box-shadow: 0 1rpx 6rpx 0 #666;

		&.item01 {
			background-color: #cd2d2c;
		}

		&.item02 {
			// opacity: 0;
			// z-index: -1;
			background-color: #ffb900;
		}

		&.item03 {
			// opacity: 0;
			// z-index: -1;
			background-color: #36adfd;
		}

		.img {
			flex-shrink: 0;
			padding: 32rpx 30rpx;
			width: 68rpx;
			height: 64rpx;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 12rpx 0 0 12rpx;
		}

		.span {
			width: 100%;
			text-align: center;
		}
	}
}
</style>
